<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { usePagination, useSwitchable } from '@/utils/hooks'
import { handleApi } from '@/utils/alert'
import { TableColumnType } from 'ant-design-vue'
import type { TableProps } from 'ant-design-vue'
import OrderTableForm from './merchant-order-form.vue'
import { getMOrderList, syncMOrders } from '@/api/order'
import { dateFormatter } from '@/utils/common'
import GoodsDetail from '@/components/goods-detail.vue'
import Copy from '@/components/copy.vue'
import PostDetail from '@/components/post-detail.vue'
import OrderStatus, { OrderStatusProps } from '@/components/order-status.vue'
import OrderCommenting from "#/merchant-order-list/order-commenting.vue"
import { SearchOutlined } from '@ant-design/icons-vue'
import MerchantOrderForm from "#/merchant-order-list/merchant-order-form.vue";
import OrderErp from "@/components/order-erp.vue";
import EditGoodsNum from "#/merchant-order-list/edit-goods-num.vue";
import PostDate from "@/components/post-date.vue";
import ExpressCell from "@/components/express-cell.vue";
import OrderRemark from '@/components/order-remark.vue'
const queryRef = ref<typeof MerchantOrderForm>()

const { dataSource, pagination, fetch, params, loading } = usePagination(getMOrderList, handleApi)
const { state: gModalState, on: openGModal, off: closeGModal } = useSwitchable()

const columns: (TableColumnType & DataIndex<IOrder>)[] = [
  { key: 'goods_info', title: '商品信息', width: 300 },
  { key: 'price&num', title: '单价/数量', width: 100 },
  { key: 'post_info', title: '收件人信息', width: 200 },
  { key: 'seller_words', title: '订单备注', width: 250 },
  { key: 'tracking_number', title: '快递单号', width: 200 },
  { key: 'status', title: '状态', width: 200 },
  { key: 'erp', title: 'ERP信息', width: 200 },
  { key: 'create_time', dataIndex: 'order_create_time', title: '创建时间', width: 200 },
  { key: 'post_date', title: '发货时间', width: 150 },
  { key: 'action', title: '操作', width: 150, fixed: 'right' },
]

const commenting = ref<IOrder>()
const { state, on, off } = useSwitchable()
const editParams = ref<IOrder>()

const onTableChange: TableProps['onChange'] = (pg) => {
  params.value.page = pg.current
  params.value.pagesize = pg.pageSize
  fetch()
}

onMounted(() => {
  fetch()
})

const onFormSubmit = (p: PaginateQuery<IOrder>) => {
  params.value = {
    ...p,
    page: params.value.page,
    pagesize: params.value.pagesize
  }
  fetch()
}

const onFormButton = async () => {
  loading.value = true
  const res = await syncMOrders().catch(handleApi)
  if (res?.code === 1) fetch()
  loading.value = false
}

const openComment = (record: IOrder) => {
  commenting.value = record
  on()
}
const openPrinting = () => {

}
const onCommentComplete = () => {
  off()
  fetch()
}

const editGoodsNum = (record: IOrder) => {
  editParams.value = record
  openGModal()
}

const searchShopName = (record: IOrder) => {
  if (queryRef.value) {
    queryRef.value.setFields('shop_name', record.shop_name)
    params.value = {
      ...queryRef.value.getValues(),
      page: params.value.page,
      pagesize: params.value.pagesize
    }
    fetch()
  }
}

const completeEditGoodsNum = () => {
  closeGModal()
  fetch()
}

</script>


<template>
  <div class="px-4 py-8">
    <OrderTableForm @submit="onFormSubmit" @button="onFormButton" ref="queryRef"></OrderTableForm>
  </div>

  <ATable
    :scroll="{ x: 2600 }"
    :columns
    :data-source="dataSource"
    :loading="loading"
    :pagination="pagination"
    @change="onTableChange"
  >
    <template #bodyCell="{ column, value, record }">

      <template v-if="column.key === 'goods_info'">
        <div class="flex text-xs text-gray-600 justify-between">
          <div class="cursor-pointer flex items-center space-x-2" @click="searchShopName(record)">
            <span class="text-nowrap text-ellipsis">{{ record.shop_name }}</span>
            <SearchOutlined />
          </div>
          <Copy :value="record.order_id" class="opacity-80">
            <span class="text-nowrap text-ellipsis">订单编号: {{ record.order_id }}</span>
          </Copy>
        </div>
        <GoodsDetail v-bind="record" />
      </template>

      <template v-if="column.key === 'price&num'">
        <div class="h-full">
          <div class="text-gray-600 flex flex-col space-y-1 h-14 first:mt-6 text-sm items-center">
            <span>¥{{ record.goods_price }}</span>
            <span>x{{ record.goods_count }}</span>
          </div>
        </div>
      </template>

      <template v-if="column.key === 'post_info'">
        <PostDetail v-bind="record as IOrder"></PostDetail>
      </template>

      <template v-if="column.key === 'seller_words'">
        <order-remark v-bind="record"></order-remark>
      </template>

      <template v-if="column.key === 'tracking_number'">
        <ExpressCell v-bind="record"></ExpressCell>
      </template>

      <template v-if="column.key === 'status'">
        <OrderStatus v-bind="record as OrderStatusProps"></OrderStatus>
      </template>

      <template v-if="column.key === 'erp'">
        <OrderErp v-bind="record"></OrderErp>
      </template>

      <template v-if="column.key === 'post_date'">
        <PostDate v-bind="record"></PostDate>
      </template>

      <template v-if="column.key === 'create_time'">
        {{ dateFormatter(value) }}
      </template>

      <template v-if="column.key === 'action'">
<!--        <AButton type="link" @click="openPrinting(record)">打印</AButton>-->
        <AButton type="link" @click="openComment(record)">备注</AButton>
        <AButton
          type="link"
          @click="editGoodsNum(record)"
          :disabled="(record.push_status !== 1 && record.push_status !== 3) || record.order_status !== 30">修改商品编码</AButton>
      </template>
    </template>
  </ATable>

  <AModal v-model:open="state" :title="null" :footer="null" :closable="false" width="600px">
    <OrderCommenting :order="commenting" @cancel="off" @complete="onCommentComplete"></OrderCommenting>
  </AModal>

  <AModal v-model:open="gModalState" :title="null" :footer="null" :closable="false" width="1000px" destroy-on-close>
    <div class="max-h-[80vh] overflow-y-auto">
      <EditGoodsNum v-bind:order="editParams!" @complete="completeEditGoodsNum" @cancel="closeGModal"></EditGoodsNum>
    </div>
  </AModal>
</template>